<template>
  <div class="container">
    <video autoplay muted loop ref="backgroundVideo">
      <source src="@/assets/0001-0100-迅捷PDF转换器.mp4" type="video/mp4" />
    </video>
    <div class="leftSelectBox">
      <div class="state">设备状态：<span>正常</span></div>
    </div>

    <div class="rightTimeBox">
      <div class="left">{{ timeNow }}</div>
      <div class="right">
        <div class="rightWeek">{{ timeWeek }}</div>
        <div class="rightTime">{{ timeDate }}</div>
      </div>
    </div>

    <div class="headerTitle">研究院办公室空气质量监测</div>

    <div class="middleRound">
      <div class="roundBgi pm25Round">PM2.5</div>
      <div class="roundBgi pm10Round">PM10</div>
      <div class="roundBgi wenduRound">温度</div>
      <div class="roundBgi shiduRound">湿度</div>
      <div class="roundBgi tvocRound">TVOC</div>
    </div>

    <div class="leftBox1" >
      <div class="leftTopBoxTitle boxTitle">301办公室</div>
      <div class="leftBoxItem" style="cursor: pointer;" @click="openHistoryData('301历史数据')">
        <!-- <div class="leftBoxItem" > -->
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/PM2.5.png" alt="" />
          </div>
          <div class="pmTitle">PM2.5</div>
          <div
            :class="{
              pmValue: true,
              orange: pm251.realData.value > pm251Alarm.uplimit,
            }"
          >
            {{ pm251.realData.value }}
          </div>
          <div
            :class="{
              pmUnit: true,
              orange: pm251.realData.value > pm251Alarm.uplimit,
            }"
          >
            ug/m³
          </div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/PM10 (1).png" alt="" />
          </div>
          <div class="pmTitle">PM10</div>
          <div
            :class="{
              pmValue: true,
              orange: pm101.realData.value > pm101Alarm.uplimit,
            }"
          >
            {{ pm101.realData.value }}
          </div>
          <div
            :class="{
              pmUnit: true,
              orange: pm101.realData.value > pm101Alarm.uplimit,
            }"
          >
            ug/m³
          </div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/空气湿度.png" alt="" />
          </div>
          <div class="pmTitle">湿度</div>
          <div class="pmValue">{{ shidu1.realData.value }}</div>
          <div class="pmUnit">(%RH)</div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/温度 (1).png" alt="" />
          </div>
          <div class="pmTitle">温度</div>
          <div class="pmValue">{{ wendu1.realData.value }}</div>
          <div class="pmUnit">(℃)</div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/TVOC.png" alt="" />
          </div>
          <div class="pmTitle">TVOC</div>
          <div class="pmValue">{{ TVOC1.realData.value }}</div>
          <div class="pmUnit">(ppb)</div>
        </div>
      </div>
    </div>
    <!-- </div> -->

    <div class="leftBox1 leftBox2">
      <div class="leftTopBoxTitle boxTitle">304办公室</div>
      <div class="leftBoxItem">
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/PM2.5.png" alt="" />
          </div>
          <div class="pmTitle">PM2.5</div>
          <div
            :class="{
              pmValue: true,
              orange: pm252.realData.value > pm252Alarm.uplimit,
            }"
          >
            {{ pm252.realData.value }}
          </div>
          <div
            :class="{
              pmUnit: true,
              orange: pm252.realData.value > pm252Alarm.uplimit,
            }"
          >
            ug/m³
          </div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/PM10 (1).png" alt="" />
          </div>
          <div class="pmTitle">PM10</div>
          <div
            :class="{
              pmValue: true,
              orange: pm102.realData.value > pm102Alarm.uplimit,
            }"
          >
            {{ pm102.realData.value }}
          </div>
          <div
            :class="{
              pmUnit: true,
              orange: pm102.realData.value > pm102Alarm.uplimit,
            }"
          >
            ug/m³
          </div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/空气湿度.png" alt="" />
          </div>
          <div class="pmTitle">湿度</div>
          <div class="pmValue">{{ shidu2.realData.value }}</div>
          <div class="pmUnit">(%RH)</div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/温度 (1).png" alt="" />
          </div>
          <div class="pmTitle">温度</div>
          <div class="pmValue">{{ wendu2.realData.value }}</div>
          <div class="pmUnit">(℃)</div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/TVOC.png" alt="" />
          </div>
          <div class="pmTitle">TVOC</div>
          <div class="pmValue">{{ TVOC2.realData.value }}</div>
          <div class="pmUnit">(ppb)</div>
        </div>
      </div>
    </div>
    <div class="leftBox1 leftBox3">
      <div class="leftTopBoxTitle boxTitle">308办公室</div>
      <div class="leftBoxItem">
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/PM2.5.png" alt="" />
          </div>
          <div class="pmTitle">PM2.5</div>
          <div
            :class="{
              pmValue: true,
              orange: pm253.realData.value > pm253Alarm.uplimit,
            }"
          >
            {{ pm253.realData.value }}
          </div>
          <div
            :class="{
              pmUnit: true,
              orange: pm253.realData.value > pm253Alarm.uplimit,
            }"
          >
            ug/m³
          </div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/PM10 (1).png" alt="" />
          </div>
          <div class="pmTitle">PM10</div>
          <div
            :class="{
              pmValue: true,
              orange: pm103.realData.value > pm103Alarm.uplimit,
            }"
          >
            {{ pm103.realData.value }}
          </div>
          <div
            :class="{
              pmUnit: true,
              orange: pm103.realData.value > pm103Alarm.uplimit,
            }"
          >
            ug/m³
          </div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/空气湿度.png" alt="" />
          </div>
          <div class="pmTitle">湿度</div>
          <div class="pmValue">{{ shidu3.realData.value }}</div>
          <div class="pmUnit">(%RH)</div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/温度 (1).png" alt="" />
          </div>
          <div class="pmTitle">温度</div>
          <div class="pmValue">{{ wendu3.realData.value }}</div>
          <div class="pmUnit">(℃)</div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/TVOC.png" alt="" />
          </div>
          <div class="pmTitle">TVOC</div>
          <div class="pmValue">{{ TVOC3.realData.value }}</div>
          <div class="pmUnit">(ppb)</div>
        </div>
      </div>
    </div>
    <div class="leftBox1 rightBox1">
      <div class="leftTopBoxTitle boxTitle">303办公室</div>
      <div class="leftBoxItem">
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/PM2.5.png" alt="" />
          </div>
          <div class="pmTitle">PM2.5</div>
          <div
            :class="{
              pmValue: true,
              orange: pm254.realData.value > pm254Alarm.uplimit,
            }"
          >
            {{ pm254.realData.value }}
          </div>
          <div
            :class="{
              pmUnit: true,
              orange: pm254.realData.value > pm254Alarm.uplimit,
            }"
          >
            ug/m³
          </div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/PM10 (1).png" alt="" />
          </div>
          <div class="pmTitle">PM10</div>
          <div
            :class="{
              pmValue: true,
              orange: pm104.realData.value > pm104Alarm.uplimit,
            }"
          >
            {{ pm104.realData.value }}
          </div>
          <div
            :class="{
              pmUnit: true,
              orange: pm104.realData.value > pm104Alarm.uplimit,
            }"
          >
            ug/m³
          </div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/空气湿度.png" alt="" />
          </div>
          <div class="pmTitle">湿度</div>
          <div class="pmValue">{{ shidu4.realData.value }}</div>
          <div class="pmUnit">(%RH)</div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/温度 (1).png" alt="" />
          </div>
          <div class="pmTitle">温度</div>
          <div class="pmValue">{{ wendu4.realData.value }}</div>
          <div class="pmUnit">(℃)</div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/TVOC.png" alt="" />
          </div>
          <div class="pmTitle">TVOC</div>
          <div class="pmValue">{{ TVOC4.realData.value }}</div>
          <div class="pmUnit">(ppb)</div>
        </div>
      </div>
    </div>
    <div class="leftBox1 rightBox2">
      <div class="leftTopBoxTitle boxTitle">305办公室</div>
      <div class="leftBoxItem">
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/PM2.5.png" alt="" />
          </div>
          <div class="pmTitle">PM2.5</div>
          <div
            :class="{
              pmValue: true,
              orange: pm254.realData.value > pm254Alarm.uplimit,
            }"
          >
            {{ pm254.realData.value }}
          </div>
          <div
            :class="{
              pmUnit: true,
              orange: pm254.realData.value > pm254Alarm.uplimit,
            }"
          >
            ug/m³
          </div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/PM10 (1).png" alt="" />
          </div>
          <div class="pmTitle">PM10</div>
          <div
            :class="{
              pmValue: true,
              orange: pm104.realData.value > pm104Alarm.uplimit,
            }"
          >
            {{ pm104.realData.value }}
          </div>
          <div
            :class="{
              pmUnit: true,
              orange: pm104.realData.value > pm104Alarm.uplimit,
            }"
          >
            ug/m³
          </div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/空气湿度.png" alt="" />
          </div>
          <div class="pmTitle">湿度</div>
          <div class="pmValue">{{ shidu4.realData.value }}</div>
          <div class="pmUnit">(%RH)</div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/温度 (1).png" alt="" />
          </div>
          <div class="pmTitle">温度</div>
          <div class="pmValue">{{ wendu4.realData.value }}</div>
          <div class="pmUnit">(℃)</div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/TVOC.png" alt="" />
          </div>
          <div class="pmTitle">TVOC</div>
          <div class="pmValue">{{ TVOC4.realData.value }}</div>
          <div class="pmUnit">(ppb)</div>
        </div>
      </div>
    </div>
    <div class="leftBox1 rightBox3">
      <div class="leftTopBoxTitle boxTitle">309办公室</div>
      <div class="leftBoxItem">
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/PM2.5.png" alt="" />
          </div>
          <div class="pmTitle">PM2.5</div>
          <div
            :class="{
              pmValue: true,
              orange: pm254.realData.value > pm254Alarm.uplimit,
            }"
          >
            {{ pm254.realData.value }}
          </div>
          <div
            :class="{
              pmUnit: true,
              orange: pm254.realData.value > pm254Alarm.uplimit,
            }"
          >
            ug/m³
          </div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/PM10 (1).png" alt="" />
          </div>
          <div class="pmTitle">PM10</div>
          <div
            :class="{
              pmValue: true,
              orange: pm104.realData.value > pm104Alarm.uplimit,
            }"
          >
            {{ pm104.realData.value }}
          </div>
          <div
            :class="{
              pmUnit: true,
              orange: pm104.realData.value > pm104Alarm.uplimit,
            }"
          >
            ug/m³
          </div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/空气湿度.png" alt="" />
          </div>
          <div class="pmTitle">湿度</div>
          <div class="pmValue">{{ shidu4.realData.value }}</div>
          <div class="pmUnit">(%RH)</div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/温度 (1).png" alt="" />
          </div>
          <div class="pmTitle">温度</div>
          <div class="pmValue">{{ wendu4.realData.value }}</div>
          <div class="pmUnit">(℃)</div>
        </div>
        <div class="firstBox">
          <div>
            <img class="pmImg" src="@/assets/TVOC.png" alt="" />
          </div>
          <div class="pmTitle">TVOC</div>
          <div class="pmValue">{{ TVOC4.realData.value }}</div>
          <div class="pmUnit">(ppb)</div>
        </div>
      </div>
    </div>

    <div class="warningDialog" v-show="warningDialogDialog">
      <div class="closeImg" @click="warningDialogDialog = false">
        <i class="el-icon-circle-close"></i>
      </div>
      <div class="robot">
        <img class="robotImg" src="@/assets/曲线 1 (1).png" alt="" />
      </div>
      <div class="warnTitle">温馨提示</div>
      <div class="warnContent">
        监测到301办公室疑似抽烟行为，请注意通风， 关注个人健康。
      </div>
      <div class="warnAuthor">领卓智慧，实时守护您的健康！</div>
    </div>

    <div class="historyDialog" v-show="historyDialog">
      <div class="historyDialogTitle">
        {{ historyTitle }}
        <div class="closeImg" @click="historyDialog = false">
          <i class="el-icon-circle-close"></i>
        </div>
      </div>
      <div class="historyContent">
        <div class="tableTitle">
          <div class="pm25title">名称</div>
          <div class="pm25title">数值</div>
          <div class="pm25title">单位</div>
          <div class="pm25title">时间</div>
        </div>
        <div class="tableContent">
          <div class="tableItem" v-for="item in historyData" :key="item.id">
            <div class="pm25title">{{ item.hj212Name }}</div>
            <div class="pm25title">{{ item.number }}</div>
            <div class="pm25title">{{ item.unit }}</div>
            <div class="pm25title">{{ item.updateTime }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn' // 导入中文语言包
import relativeTime from 'dayjs/plugin/relativeTime' // 导入相对时间插件
// 使用插件
dayjs.extend(relativeTime)
dayjs.locale('zh-cn') // 设置语言为中文

import _ from 'lodash-es'

import { getSensorList, getAlarmList } from '@/api/index.js'

export default {
  name: 'indexPage',
  props: {},
  components: {},
  data() {
    return {
      timeDate: '',
      timeWeek: '',
      timeNow: '',
      cmsUserId: 219,
      allData1: [],
      warningDialogDialog: false,
      historyDialog: false,
      historyTitle: '',
      historyData: [],
      wendu1: {
        realData: {
          realData: '-',
        },
      },
      shidu1: {
        realData: {
          realData: '-',
        },
      },
      pm251: {
        realData: {
          realData: '-',
        },
      },
      pm101: {
        realData: {
          realData: '-',
        },
      },
      TVOC1: {
        realData: {
          realData: '-',
        },
      },
      allData2: [],
      wendu2: {
        realData: {
          realData: '-',
        },
      },
      shidu2: {
        realData: {
          realData: '-',
        },
      },
      pm252: {
        realData: {
          realData: '-',
        },
      },
      pm102: {
        realData: {
          realData: '-',
        },
      },
      TVOC2: {
        realData: {
          realData: '-',
        },
      },
      allData3: [],
      wendu3: {
        realData: {
          realData: '-',
        },
      },
      shidu3: {
        realData: {
          realData: '-',
        },
      },
      pm253: {
        realData: {
          realData: '-',
        },
      },
      pm103: {
        realData: {
          realData: '-',
        },
      },
      TVOC3: {
        realData: {
          realData: '-',
        },
      },
      allData4: [],
      wendu4: {
        realData: {
          realData: '-',
        },
      },
      shidu4: {
        realData: {
          realData: '-',
        },
      },
      pm254: {
        realData: {
          realData: '-',
        },
      },
      pm104: {
        realData: {
          realData: '-',
        },
      },
      TVOC4: {
        realData: {
          realData: '-',
        },
      },
      allData5: [],
      wendu5: {
        realData: {
          realData: '-',
        },
      },
      shidu5: {
        realData: {
          realData: '-',
        },
      },
      pm255: {
        realData: {
          realData: '-',
        },
      },
      pm105: {
        realData: {
          realData: '-',
        },
      },
      TVOC5: {
        realData: {
          realData: '-',
        },
      },
      allData6: [],
      wendu6: {
        realData: {
          realData: '-',
        },
      },
      shidu6: {
        realData: {
          realData: '-',
        },
      },
      pm256: {
        realData: {
          realData: '-',
        },
      },
      pm106: {
        realData: {
          realData: '-',
        },
      },
      TVOC6: {
        realData: {
          realData: '-',
        },
      },
      pm251Alarm: {},
      pm101Alarm: {},
      pm252Alarm: {},
      pm102Alarm: {},
      pm253Alarm: {},
      pm103Alarm: {},
      pm254Alarm: {},
      pm104Alarm: {},
      pm255Alarm: {},
      pm105Alarm: {},
      pm256Alarm: {},
      pm106Alarm: {},
    }
  },
  created() {
    // 获取当前日期和时间
    this.updateTime()
    this.getSensorListApi()
    setInterval(() => {
      this.updateTime()
    }, 1000)
    setInterval(() => {
      this.getSensorListApi()
    }, 30000)
  },
  mounted() {
    this.$refs.backgroundVideo.play()
  },
  methods: {
    updateTime() {
      const now = dayjs()
      // 获取当天日期，格式化为 YYYY-MM-DD
      this.timeDate = now.format('YYYY-MM-DD')
      // 获取当天星期，格式化为 星期X 的形式
      this.timeWeek = now.format('dddd') // 'dddd' 格式化为星期几的全称
      // 获取当天时间，格式化为 HH:mm:ss
      this.timeNow = now.format('HH:mm:ss')
    },
    async getSensorListApi() {
      const res = await getSensorList({ cmsUserId: this.cmsUserId })

      this.allData1 = res.data.filter((item) => item.name === '301办公室')
      this.wendu1 = _.cloneDeep(
        this.allData1[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === '温度')
      this.shidu1 = _.cloneDeep(
        this.allData1[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === '湿度')
      this.pm251 = _.cloneDeep(
        this.allData1[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === 'PM2.5')
      this.pm101 = _.cloneDeep(
        this.allData1[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === 'PM10')
      this.TVOC1 = _.cloneDeep(
        this.allData1[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === 'TVOC')
      this.pm251Alarm = this.pm251.listRuleSon.find((item) => item.level == '1')
      this.pm101Alarm = this.pm101.listRuleSon?.find(
        (item) => item.level == '1'
      )
      if (
        this.pm251.realData.value > this.pm251Alarm.uplimit ||
        this.pm101.realData.value > this.pm101Alarm.uplimit
      ) {
        this.warningDialogDialog = true
      } else {
        this.warningDialogDialog = false
      }

      this.allData2 = res.data.filter((item) => item.name === '304办公室')
      this.wendu2 = _.cloneDeep(
        this.allData2[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === '温度')
      this.shidu2 = _.cloneDeep(
        this.allData2[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === '湿度')
      this.pm252 = _.cloneDeep(
        this.allData2[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === 'PM2.5')
      this.pm102 = _.cloneDeep(
        this.allData2[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === 'PM10')
      this.TVOC2 = _.cloneDeep(
        this.allData2[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === 'TVOC')
      this.pm252Alarm = this.pm252.listRuleSon.find((item) => item.level == '1')
      this.pm102Alarm = this.pm102.listRuleSon?.find(
        (item) => item.level == '1'
      )

      this.allData3 = res.data.filter((item) => item.name === '308办公室')
      this.wendu3 = _.cloneDeep(
        this.allData3[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === '温度')
      this.shidu3 = _.cloneDeep(
        this.allData3[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === '湿度')
      this.pm253 = _.cloneDeep(
        this.allData3[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === 'PM2.5')
      this.pm103 = _.cloneDeep(
        this.allData3[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === 'PM10')
      this.TVOC3 = _.cloneDeep(
        this.allData3[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === 'TVOC')
      this.pm253Alarm = this.pm253.listRuleSon.find((item) => item.level == '1')
      this.pm103Alarm = this.pm103.listRuleSon?.find(
        (item) => item.level == '1'
      )

      this.allData4 = res.data.filter((item) => item.name === '303办公室')
      this.wendu4 = _.cloneDeep(
        this.allData4[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === '温度')
      this.shidu4 = _.cloneDeep(
        this.allData4[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === '湿度')
      this.pm254 = _.cloneDeep(
        this.allData4[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === 'PM2.5')
      this.pm104 = _.cloneDeep(
        this.allData4[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === 'PM10')
      this.TVOC4 = _.cloneDeep(
        this.allData4[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === 'TVOC')
      this.pm254Alarm = this.pm254.listRuleSon.find((item) => item.level == '1')
      this.pm104Alarm = this.pm104.listRuleSon?.find(
        (item) => item.level == '1'
      )

      this.allData5 = res.data.filter((item) => item.name === '305办公室')
      this.wendu5 = _.cloneDeep(
        this.allData5[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === '温度')
      this.shidu5 = _.cloneDeep(
        this.allData5[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === '湿度')
      this.pm255 = _.cloneDeep(
        this.allData5[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === 'PM2.5')
      this.pm105 = _.cloneDeep(
        this.allData5[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === 'PM10')
      this.TVOC5 = _.cloneDeep(
        this.allData5[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === 'TVOC')
      this.pm255Alarm = this.pm255.listRuleSon.find((item) => item.level == '1')
      this.pm105Alarm = this.pm105.listRuleSon?.find(
        (item) => item.level == '1'
      )

      this.allData6 = res.data.filter((item) => item.name === '309办公室')
      this.wendu6 = _.cloneDeep(
        this.allData6[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === '温度')
      this.shidu6 = _.cloneDeep(
        this.allData6[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === '湿度')
      this.pm256 = _.cloneDeep(
        this.allData6[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === 'PM2.5')
      this.pm106 = _.cloneDeep(
        this.allData6[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === 'PM10')
      this.TVOC6 = _.cloneDeep(
        this.allData6[0].listDataScenePoint[0].listHj212
      ).find((item) => item.name === 'TVOC')
      this.pm256Alarm = this.pm256.listRuleSon.find((item) => item.level == '1')
      this.pm106Alarm = this.pm106.listRuleSon?.find(
        (item) => item.level == '1'
      )
    },
    openHistoryData(e) {
      this.getAlarmApi()
      this.historyTitle = e
      this.historyDialog = true
      this.warningDialogDialog = false
    },
    async getAlarmApi() {
      const res = await getAlarmList({ cmsUserId: this.cmsUserId })
      console.log(res)
      this.historyData = res.data
    },
  },

  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.container {
  width: 1920px;
  height: 1080px;
  background-image: url('@/assets/领卓空气监测驾驶舱 切图新.png');
  // background-image: url('@/assets/图层 18.png');
  color: #fff;
  position: relative;
  background-size: cover; /* 使背景图片覆盖整个元素 */
}
video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保视频覆盖整个容器 */
  z-index: -1; /* 确保视频在内容之下 */
}
.middleRound {
  .roundBgi {
    background-image: url('@/assets/椭圆 622 拷贝 5.png');
    width: 81px;
    height: 82px;
    text-align: center;
    line-height: 82px;
    font-size: 20px;
    color: #9ae1ff;
    font-weight: bold;
  }
  .pm25Round {
    position: absolute;
    left: 887px;
    top: 213px;
  }
  .pm10Round {
    position: absolute;
    left: 983px;
    top: 335px;
  }
  .wenduRound {
    position: absolute;
    left: 843px;
    top: 376px;
  }
  .shiduRound {
    position: absolute;
    left: 1003px;
    top: 465px;
  }

  .tvocRound {
    position: absolute;
    left: 796px;
    top: 516px;
  }
}

.leftSelectBox {
  display: flex;
  align-items: center;
  position: absolute;
  left: 136px;
  top: 56px;
  color: #bdd8e4;
  .leftSelect {
    background-image: url('@/assets/图层 15.png');
    width: 153px;
    height: 39px;
    text-align: center;
    line-height: 39px;
    margin-right: 30px;
  }

  .state span {
    color: #24f89c;
    position: relative;
    padding-left: 10px; /* 为文本和圆点之间添加一些间距 */
  }

  .state span::before {
    content: ''; /* 伪元素的内容为空 */
    position: absolute;
    left: 0; /* 圆点的位置 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 垂直居中 */
    width: 8px; /* 圆点的宽度 */
    height: 8px; /* 圆点的高度 */
    background-color: #24f89c; /* 圆点的颜色 */
    border-radius: 50%; /* 使圆点变为圆形 */
  }
}

.rightTimeBox {
  position: absolute;
  top: 63px;
  right: 140px;
  display: flex;
  align-items: center;
  .left {
    font-weight: bold;
    font-size: 28px;
    color: #ffffff;
    border-right: 1px solid #9ec5e7;
    padding-right: 30px;
  }
  .right {
    padding-left: 24px;
    .rightTime {
      margin-top: 4px;
      font-size: 10px;
      color: #cdd7e6;
    }
  }
}

.headerTitle {
  font-size: 44px;
  position: absolute;
  left: 0;
  top: 16px;
  text-align: center;
  width: 100%;
  font-weight: bold;
}

.boxTitle {
  font-family: Alimama FangYuanTi VF;
  font-weight: bold;
  font-size: 24px;
  color: #d9eaf5;
}

.leftBoxValue {
  font-size: 24px;
  color: #53f9ff;
  font-weight: 800;
}
.orange {
  color: #ff6d3a !important;
}

.pmImg {
  width: 64px;
  height: 64px;
}
.leftBox1 {
  position: absolute;
  left: 89px;
  top: 134px;
  background-image: url('@/assets/标1.png');
  width: 492px;
  height: 250px;
  .leftTopBoxTitle {
    position: absolute;
    left: 74px;
    top: 10px;
  }
  .leftBoxItem {
    display: flex;
    justify-content: space-around;
    margin-top: 70px;
    padding-left: 30px;
    text-align: center;
    .pmTitle {
      color: #d6f5fb;
      margin-top: 12px;
    }
    .pmValue {
      color: #53f9ff;
      font-size: 24px;
    }
    .pmUnit {
      color: #53f9ff;
    }
  }
}
.leftBox2 {
  top: 437px;
  position: absolute;
  left: 89px;
}

.leftBox3 {
  position: absolute;
  left: 89px;
  top: 740px;
}

.rightBox1 {
  position: absolute;
  left: 1308px;
  top: 134px;
}

.rightBox2 {
  position: absolute;
  left: 1308px;
  top: 437px;
}
.rightBox3 {
  position: absolute;
  left: 1308px;
  top: 740px;
}
.warningDialog {
  background-image: url('@/assets/色相／饱和度 1 (1).png');
  width: 963px;
  height: 662px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .closeImg {
    width: 30px;
    font-size: 30px;
    height: 30px;
    position: absolute;
    right: 50px;
    top: 50px;
    cursor: pointer;
  }
  .robot {
    width: 207px;
    height: 233px;
    margin: 65px auto 0;
  }
  .warnTitle {
    font-weight: bold;
    font-size: 36px;
    color: #ffffff;
    text-align: center;
  }
  .warnContent {
    width: 429px;
    text-align: center;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 28px;
    color: #edfbff;
    margin: 30px auto 0;
  }
  .warnAuthor {
    font-weight: 400;
    font-size: 28px;
    color: #4dfff2;
    text-align: center;
    margin: 50px auto 0;
  }
}
.historyDialog {
  background-image: url('@/assets/色相／饱和度 1 (1).png');
  width: 963px;
  height: 662px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .historyDialogTitle {
    text-align: center;
    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
    padding-top: 50px;
    .closeImg {
      width: 30px;
      height: 30px;
      position: absolute;
      right: 50px;
      top: 50px;
      cursor: pointer;
    }
  }
  .historyContent {
    padding: 10px 50px 0;
    .tableContent {
      height: 500px;
      overflow-y: auto;

      position: relative; /* 确保滚动条在盒子内部 */
      /* 自定义滚动条的样式 */
      .historyContent::-webkit-scrollbar {
        width: 12px; /* 滚动条的宽度 */
        background-color: transparent; /* 滚动条的背景颜色 */
      }

      .historyContent::-webkit-scrollbar-thumb {
        background-color: #888; /* 滚动条的滑块颜色 */
        border-radius: 6px; /* 滑块的圆角 */
      }

      .historyContent::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* 滚动条轨道的颜色 */
        border-radius: 6px; /* 轨道的圆角 */
      }

      /* 将滚动条左移 */
      .historyContent {
        margin-left: -10px; /* 根据需要调整左移的距离 */
      }
    }
    .tableTitle {
      background-color: #293a3e;
      width: 100%;
      height: 40px;
      line-height: 40px;
      color: #fff;
      display: flex;
      justify-content: space-evenly;
    }
    .tableItem {
      width: 100%;
      height: 40px;
      line-height: 40px;
      color: #fff;
      display: flex;
      justify-content: space-evenly;
      border-bottom: 1px solid #fff;
    }
    .pm25title{
      width: 25%;
      text-align: center;
    }
  }
}
</style>
